import React from "react";
import {Image, View, Text} from "@tarojs/components";
import classNames from "classnames";

import styles from "./FunctionPad.module.scss"

interface Props {
  items:FunctionPadItem[]
}

interface State {
}

export class FunctionPadItem {
  name:string;
  src:string;
  onClick?:()=>void;
}

export class FunctionPad extends React.Component<Props, State> {
  constructor(args: Props | Readonly<Props>) {
    super(args);
  }

  componentDidMount(): void {
    console.log("FunctionPad.componentDidMount")
  }

  componentWillUnmount(): void {
    console.log("FunctionPad.componentWillUnmount")
  }

  render () {
    const items = this.props.items.map(((value, index) => {
      let onClick = ()=>{console.warn(`${value.name} onClick ignore`)};
      if (value.onClick) {
        onClick = value.onClick;
      }
      const itemPerLine = 4;
      const style = `margin-left:${(index%itemPerLine?26:0)}px; margin-top:${index<itemPerLine?0:26}px`;

      return (
        <View key={value.name} className={styles.item} onClick={onClick.bind(this)} style={style}>
          <Image src={value.src} className={styles.image} />
          <Text className={styles.name}>{value.name}</Text>
        </View>
      )
    }));

    return (
      <View className={classNames(styles.container, "line_hd")}>
        {items}
      </View>
    )
  }
}

